<template>
 <div class="container3D">
   <div id="element">
     <div id="g-img"></div>
   </div>
 </div>
</template>

<script setup>
import { onMounted } from "vue";

const multiple = 15;
let element,img = null
onMounted(()=>{
  const mouseOverContainer = document.getElementsByClassName("container3D")[0];
  element = document.getElementById("element");
  img = document.getElementById("g-img");

  mouseOverContainer.addEventListener("mousemove", (e) => {
    window.requestAnimationFrame(function () {
      transformElement(e.clientX, e.clientY);
    });
  });

  mouseOverContainer.addEventListener("mouseleave", (e) => {
    window.requestAnimationFrame(function () {
      element.style.transform = "rotateX(0) rotateY(0)";
    });
  });
})

function transformElement(x, y) {
  let box = element.getBoundingClientRect();
  const calcX = -(y - box.y - box.height / 2) / multiple;
  const calcY = (x - box.x - box.width / 2) / multiple;
  const percentage = parseInt((x - box.x) / box.width * 1000) / 10;

  element.style.transform = "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";
  img.style = `--per: ${percentage}%`;
}

</script>

<style scoped>
.container3D {
  height: 80vh;
  display: flex;
  transform-style: preserve-3d;
  perspective: 500px;
  cursor: pointer;
  background: #000;
}

#element {
  margin: auto;
  width: 250px;
  height: 400px;
  background: linear-gradient(45deg, black, deeppink, #6006ff);
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: all .1s;
}

#g-img {
  --per: 30%;
  position: relative;
  width: 100%;
  height: 100%;
  background: url('https://key-drop.com/cdn-cgi/image/format=auto,width=270,dpr=2/uploads/skins/JAINA.png');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  filter: brightness(1.2);
}
#g-img::after {
   content: "";
   display: none;
   position: absolute;
   inset: 0;
   border-radius: 10px;
   background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
   mix-blend-mode: color-dodge;
 }

#g-img::before {
   content: "";
   display: none;
   position: absolute;
   /*border: 1px solid #999;*/
   inset: 0;
   border-radius: 10px;
   background:
       linear-gradient(
           115deg,
           transparent 0%,
           rgba(255, 255, 255, 0.7) var(--per),
           rgba(0, 0, 0, .6) calc(var(--per) + 25%),
           rgba(255, 255, 255, .5) calc(var(--per) + 50%),
           transparent 100%
       );
   mix-blend-mode: color-dodge;
 }

#g-img:hover::after,
#g-img:hover::before {
   display: block;
 }
</style>
